<template>
    <MkDrawer ref="drawerRef" headerButton="none">
        <template #btn>
            <el-button type="primary" @click="r.showPrintTest = true">测试</el-button>
            <el-button type="primary" @click="r.showEditCode = true">修改</el-button>
        </template>
        <MkForm :model="r.model" ref="mkFormRef">
            <el-container>
                <el-aside>
                    <MkSelectEnum label="分组" v-model="r.model.category" prop='category' :isEdit="false"
                        enumType="PrintCategory" />
                    <MkInput label="代码" v-model="r.model.code" prop='code' :isEdit="false" />
                    <MkInput label="标题" v-model="r.model.title" prop='title' :isEdit="false" />
                </el-aside>
                <el-main style="padding: 0px 0px 0px 18px;">
                    <el-form-item label="说明">
                        <el-input :rows="6" type="textarea" placeholder="必须说明用途和参数" v-model="r.model.remark"
                            :disabled="true" />
                    </el-form-item>
                </el-main>
            </el-container>
        </MkForm>
        <span style="padding:6px" />
        <el-tabs type="border-card">
            <el-tab-pane label="模板">
                <v-ace-editor v-model:value="r.model.template" lang="html" theme="terminal" :min-lines="30"
                    :maxLines="1000" :readonly="true" :options="aceConfig" />
            </el-tab-pane>
            <el-tab-pane label="SQL1">
                <v-ace-editor v-model:value="r.model.sql1" lang="sql" theme="terminal" :min-lines="30" :maxLines="1000"
                    :style="editStyle" :readonly="true" />
            </el-tab-pane>
            <el-tab-pane label="SQL2" name="sql2">
                <v-ace-editor v-model:value="r.model.sql2" lang="sql" theme="terminal" :min-lines="30" :maxLines="1000"
                    :style="editStyle" :readonly="true" />
            </el-tab-pane>
            <el-tab-pane label="SQL3">
                <v-ace-editor v-model:value="r.model.sql3" lang="sql" theme="terminal" :min-lines="30" :maxLines="1000"
                    :style="editStyle" :readonly="true" />
            </el-tab-pane>
            <el-tab-pane label="SQL4">
                <v-ace-editor v-model:value="r.model.sql4" lang="sql" theme="terminal" :min-lines="30" :maxLines="1000"
                    :style="editStyle" :readonly="true" />
            </el-tab-pane>
            <el-tab-pane label="SQL5">
                <v-ace-editor v-model:value="r.model.sql5" lang="sql" theme="terminal" :min-lines="30" :maxLines="1000"
                    :style="editStyle" :readonly="true" />
            </el-tab-pane>
        </el-tabs>
        <MkDialog title="更新代码" v-model="r.showEditCode" @submit="updateCode">
            <MkForm>
                <MkSelectEnum label="分组" v-model="r.model.category" enumType="PrintCategory" />
                <MkInput label="代码" v-model="r.model.code"></MkInput>
            </MkForm>
        </MkDialog>
        <MkDialog title="打印测试" v-model="r.showPrintTest" @submit="printTest">
            <MkForm>
                <MkInput label="p1" v-model="r.p1"></MkInput>
                <MkInput label="p2" v-model="r.p2"></MkInput>
                <MkInput label="p3" v-model="r.p3"></MkInput>
                <MkInput label="说明" :rows="3" type="textarea" placeholder="必须说明用途和参数" v-model="r.model.remark" />
            </MkForm>
        </MkDialog>
    </MkDrawer>

    <MkPrintWeb :code="r.model.code" ref="printRef"></MkPrintWeb>
</template>

<script lang="ts" setup>
// 问卷分类新增，编辑
import { reactive, ref } from 'vue';
// 接口
import { BasPrintApi } from '/@/api/bas/basPrint';
import { BasPrintUpdateInput } from '/@/api/bas/basPrint/dto';
// 工具
import { isNull, clog, showSuccess } from '/@/utils/index'

import { VAceEditor } from 'vue3-ace-editor';
import 'ace-builds/src-noconflict/mode-html'; // Load the language definition file used below
import 'ace-builds/src-noconflict/mode-sql'; // Load the language definition file used below
import 'ace-builds/src-noconflict/theme-terminal'; // Load the theme definition file used below
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/ext-searchbox';
import MkPrintWeb from '/@/componentsMaike/other/MkPrintWeb.vue';

const emits = defineEmits(['onSuccess']);

const mkFormRef = ref();
const drawerRef = ref();

const editStyle = { fontSize: '14px' }

//ace编辑器配置
const aceConfig = {
    readonly: true,
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true,
    tabSize: 2,
    showPrintMargin: false,
    fontSize: 14,
    fontFamily: '"Consolas", "Lucida Console", "Courier New", "monospace"',
    //showGutter: true, //显示行号
    showLineNumbers: true, //显示行号
    showFoldWidgets: true, //显示折叠按钮
    //showInvisibles: true, //显示空白字符
    useWorker: false, //是否使用工作线程
}

const r = reactive({
    showPrintTest: false,
    showEditCode: false,
    isEdit: false,
    model: {} as BasPrintUpdateInput,
    p1: "",
    p2: "",
    p3: "",
});

const itemConfig = (fieldName: string) => {
    return { isEdit: r.isEdit };
}

// 打开弹窗
const open = async (row: any) => {
    drawerRef.value.show();
    mkFormRef.value?.resetFields();
    if (isNull(row)) {
        r.isEdit = true;
        r.model = {} as BasPrintUpdateInput;
    } else {
        r.isEdit = false;
        r.model = JSON.parse(JSON.stringify(row))
    }
};

const updateCode = async () => {
    await BasPrintApi().updateCode(r.model)
    r.showEditCode = false
    emits("onSuccess")
}

// 打印测试
const printRef = ref()

const printTest = async () => {
    r.showPrintTest = false;
    printRef.value.printWeb(r.p1, r.p2, r.p3)
}

// 导出对象
defineExpose({ open });
</script>
